import React, { Component } from 'react'
import { connect } from 'react-redux'
import axios from 'axios'
class Home extends Component {
  componentDidMount () {
    this.props.getBannerList()
    this.props.getProList()
  }
  render() {
    const { bannerList, proList } = this.props
    return (
      <div>
        <ul>
          {
            bannerList && bannerList.map(item => (
              <li key = { item.bannerid }>
                <img style={{ width: 100 }} src={ item.img } alt={ item.alt }/>
              </li>
            ))
          }
        </ul>
        <ul>
          {
            proList && proList.map(item => (
              <li key = { item.proid }>
                { item.proname }
              </li>
            ))
          }
        </ul>
      </div>
    )
  }
}
// (state) => { return { bannerList: state.bannerList, proList: state.proList } }
export default connect(({ bannerList, proList }) => ({ bannerList, proList }), 
(dispatch) => ({
  getBannerList () {
    axios.get('http://121.89.205.189/api/banner/list')
      .then(res => {
        dispatch({
          type: 'UPDATE_BANNER_LIST',
          payload: res.data.data
        })
      })
  },
  getProList () {
    axios.get('http://121.89.205.189/api/pro/list')
      .then(res => {
        dispatch({
          type: 'UPDATE_PRO_LIST',
          payload: res.data.data
        })
      })
  }
}))(Home)
